<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>加油记录表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="resources/layui/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="resources/layui/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select id="carNo" lay-search  type="text" class="layui-input searchVal" placeholder="请输入搜索的内容">
                    </select>
                    <!--<input type="text" class="layui-input searchVal" placeholder="请输入搜索的内容"/>-->
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal add_btn">添加记录</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>
            </div>
        </form>
    </blockquote>


    <table id="refuelingRecordList" lay-filter="refuelingRecordList"></table>

    <!--操作-->
    <script type="text/html" id="refuelingRecordListBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="look">详情</a>
    </script>
</form>
<script type="text/javascript" src="resources/layui/layui/layui.js"></script>
<script th:inline="none">
    layui.use(['form','layer','laydate','table','laytpl','upload'],function() {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            table = layui.table;
            upload=layui.upload;
            laydate.render({
            elem: ".oil_date" ,//指定元素
            // type:'datetime'
        });
        var cars;
        $.ajax({
            url:'/drvingRecords/cars.do',
            success:function (data) {
                cars += "<option value=''>请输入车牌号</option>"
                for (i = 0; i < data.length; i++) {
                    cars += ("<option value='" + data[i].car_no + "'>" + data[i].car_no + "</option>")
                }
                $("#carNo").append(cars);
                form.render('select');
            }
        });
        //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
        $(".search_btn").on("click", function () {
            var car_no = $(".searchVal").val();
            console.log(car_no);
            table.reload("refuelingRecordListTable", {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                url: "refuelingRecords?car.car_no=" + car_no
            })
        });
        //用户列表
        var tableIns = table.render({
            elem: '#refuelingRecordList',
            url: 'refuelingRecords',
            page: true,
            height : "full-95",
            limit: 10,
            limits: [10, 15, 20, 25],
            id: "refuelingRecordListTable",
            cols: [[
                {type: "checkbox", fixed: "left"},
                {field: 'id', width: 80, title: '编号', align: "center"},
                {
                    field: 'car', width: 110, title: '车牌', align: "center", templet: function (row) {
                        return row.car.car_no;
                    }
                },
                {
                    field: 'currentUnit', width: 200, title: '加油站', align: "center", templet: function (row) {
                        return row.currentUnit.unit_name;
                    }
                },
                {
                    field: 'dictionary', width: 85, title: '油号', align: "center", templet: function (row) {
                        return row.dictionary.name;
                    }
                },
                {field: 'oil_date',width:130, title: '加油时间',align:"center"},
                {field: 'unit_price',width:80, title: '单价',align:"center"},
                {field: 'total_amount',width:100, title: '总金额',align:"center"},
                {
                    field: 'driver', width: 100, title: '经办人', align: "center", templet: function (row) {
                        return row.driver.name;
                    }
                },
                {title: '操作', width: 200, templet: '#refuelingRecordListBar', fixed: "right", align: "center"}
            ]]
        });
        table.on("tool(refuelingRecordList)",function (obj) {
            var data=obj.data;
            switch (obj.event){
                case 'del':
                    deleteRefuelingRecord(data);
                    break;
                case 'edit':
                    edit(data);
                    break;
                case 'look':
                    look(data);
                    break;
            }
        });
        function look(data) {
            var index=layui.layer.open({
                title:"加油详细表",
                type:2,
                area:['500px','500px'],
                content:"/toRefuelingRecordAllPage.do",
                success:function (layero,index) {
                    var body = layui.layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                    body.contents().find("#id").val(data.id);
                    body.contents().find(".oil_date").val(data.oil_date);
                    body.contents().find(".unit_price").val(data.unit_price);
                    body.contents().find(".total_amount").val(data.total_amount);
                    body.contents().find(".this_mil").val(data.this_mil);
                    body.contents().find(".last_mil").val(data.last_mil);
                    body.contents().find(".this_gas_volume").val(data.this_gas_volume);
                    body.contents().find(".last_gas_volume").val(data.last_gas_volume);
                    body.contents().find(".remarks").val(data.remarks);
                    body.contents().find("#carNo").val(data.car.car_no);
                    body.contents().find("#unitName").val(data.currentUnit.unit_name);
                    body.contents().find("#oilNo").val(data.dictionary.name);
                    body.contents().find("#driverId").val(data.driver.name);
                }
            })
        }
        //修改加油表
        function edit(data) {
            var index=layui.layer.open({
                title:"修改加油表",
                type:2,
                content:"/toRefuelingRecordEditPage.do",
                success:function (layero,index) {
                    var body = layui.layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                    body.contents().find("#id").val(data.id);
                    body.contents().find(".oil_date").val(data.oil_date);
                    body.contents().find(".unit_price").val(data.unit_price);
                    body.contents().find(".total_amount").val(data.total_amount);
                    body.contents().find(".this_mil").val(data.this_mil);
                    body.contents().find(".last_mil").val(data.last_mil);
                    body.contents().find(".this_gas_volume").val(data.this_gas_volume);
                    body.contents().find(".last_gas_volume").val(data.last_gas_volume);
                    body.contents().find(".remarks").val(data.remarks);
                    var carId=data.car.id;
                    var cars;
                    $.ajax({
                        url:'/drvingRecords/cars.do',
                        success:function (data) {
                            cars += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(carId==data[i].id){
                                    cars += ("<option value='" + data[i].id + "'selected>" + data[i].car_no + "</option>")
                                }else{
                                    cars += ("<option value='" + data[i].id + "'>" + data[i].car_no + "</option>")
                                }
                            }
                            body.contents().find("#carNo").append(cars);
                            form.render('select');
                        }
                    });
                    var stationId=data.currentUnit.id;
                    var currentUnits;
                    $.ajax({
                        url:'/refuelingRecords/currentUnits.do',
                        success:function (data) {
                            currentUnits += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(stationId==data[i].id){
                                    currentUnits += ("<option value='" + data[i].id + "'selected>" + data[i].unit_name + "</option>")
                                }else {
                                    currentUnits += ("<option value='" + data[i].id + "'>" + data[i].unit_name + "</option>")
                                }
                            }
                            body.contents().find("#unitName").append(currentUnits);
                            form.render('select');
                        }
                    });
                    var oilId=data.dictionary.id;
                    var oils;
                    $.ajax({
                        url:'/refuelingRecords/oils.do',
                        success:function (data) {
                            oils += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(oilId==data[i].id){
                                    oils += ("<option value='" + data[i].id + "'selected>" + data[i].name + "</option>")
                                }else {
                                    oils += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }

                            }
                            body.contents().find("#oilNo").append(oils);
                            form.render('select');
                        }
                    });

                    var driverId=data.driver.id;
                    var drivers;
                    $.ajax({
                        url:'/drvingRecords/drivers.do',
                        success:function (data) {
                            drivers += "<option value=''>------------请选择------------</option>"
                            for (i = 0; i < data.length; i++) {
                                if(driverId==data[i].id){
                                    drivers += ("<option value='" + data[i].id + "'selected>" + data[i].name + "</option>")
                                }else {
                                    drivers += ("<option value='" + data[i].id + "'>" + data[i].name + "</option>")
                                }

                            }
                            body.contents().find("#driverId").append(drivers);
                            form.render('select');
                        }
                    });
                }
            })
            layui.layer.full(index);
        }
        function deleteRefuelingRecord(data) {
            $.ajax({
                url:"refuelingRecords/"+data.id,
                type:"DELETE",
                dataType:"json",
                success:function (res) {
                    if(res.code==1007){
                        layer.msg(res.msg);
                        tableIns.reload();//重新刷新表格
                    }
                }
            });
        }
        //完成批量删除
        //批量删除
        $(".delAll_btn").click(function () {
            var checkStatus = table.checkStatus('refuelingRecordListTable');
            var data = checkStatus.data;
            var refIds = [];
            if(data.length > 0) {
                for (var i in data) {
                    refIds.push(data[i].id);
                }
                layer.confirm('确定删除选中的用户？', {icon: 2, title: '提示信息'}, function (index) {
                    $.ajax({
                        url:"/refuelingRecords/deleteBathRefuelingRecord",
                        type:"GET",
                        data:{ids:refIds},
                        dataType:"json",
                        success:function (res) {
                            if(res.code==1007){
                                tableIns.reload();
                                layer.close(index);
                            }
                        }
                    });
                })
            }else{
                layer.msg("请选择需要删除的用户");
            }
        });
        $(".add_btn").click(function () {
            var index=layui.layer.open({
                title:"添加加油记录",
                type:2,
                // area: ['600px', '550px'],
                content:"/toRefuelingRecordAddPage.do",
            })
            layui.layer.full(index);
            window.sessionStorage.setItem("index",index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize",function(){
                layui.layer.full(window.sessionStorage.getItem("index"));
            })
        })
    })
</script>
</body>
</html>